<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>多边形画行政边界</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
</head>

<body>

<div id="map"></div>

<script type="text/javascript" src="../dist/Mapv.js"></script>
<script type="text/javascript" src="example.js"></script>
<script type="text/javascript">

/**
 * @file 示例代码
 */

bmap.centerAndZoom(new BMap.Point(105.403119, 35.528658), 7); // 初始化地图,设置中心点坐标和地图级别

// 第一步创建mapv示例
var mapv = new Mapv({
    drawTypeControl: true,
    map: bmap  // 百度地图的map实例
});

var cityNames = {
    "榆林": parseInt(Math.random() * 100),
    "西安": parseInt(Math.random() * 100),
    "安康": parseInt(Math.random() * 100),
    "铜川": parseInt(Math.random() * 100),
    "咸阳": parseInt(Math.random() * 100),
    "渭南": parseInt(Math.random() * 100),
    "宝鸡": parseInt(Math.random() * 100),
    "延安": parseInt(Math.random() * 100),
    "汉中": parseInt(Math.random() * 100),
    "商洛": parseInt(Math.random() * 100)
};

var data = [];

var cityLoad = { //判断加载完成的城市边界数据
}

function getBoundary(cityname){
	var bdary = new BMap.Boundary();
	bdary.get(cityname, function(rs){ // 异步加载
        cityLoad[cityname] = true;
        var boundary = rs.boundaries[0];
        boundary = boundary.split(";");
        for (var i = 0; i < boundary.length; i++) {
            boundary[i] = boundary[i].split(",");
        }
        data.push({
            geo: boundary,
            count: cityNames[cityname]
        });
        if (isAllComplete()) {
            allLoadCallback();
        }
	});
}

/**
 * 是否全部加载完成
 */
function isAllComplete() {
    for (var key in cityNames) {
        if (!cityLoad[key]) {
            return false;
        }
    }
    return true;
}

for (var key in cityNames) {
    getBoundary(key);
}

function allLoadCallback() {
    console.log(data);

    var layer = new Mapv.Layer({
        zIndex: 1,
        mapv: mapv,
        dataType: 'polygon',
        data: data,
        drawType: 'intensity',
        drawOptions: {
            //strokeStyle: 'yellow',
            //lineWidth: 1,
            max: 100,
            label: { // 显示label文字
                show: true, // 是否显示
                font: "11px", // 设置字号
                minZoom: 7, // 最小显示的级别
                fillStyle: 'rgba(255, 255, 255, 1)' // label颜色
            },
            gradient: { 
                '0.01': 'blue',
                '0.1': 'cyan',
                '0.2': 'lime',
                '0.3': 'yellow',
                '1.0': 'red'
            },
        }
    });

}

</script>
</body>

</html>
